<!DOCTYPE html>
<html>
<head>
	<title></title>

    <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB9ZgDbEH6lp_X6YE4JNt_M8dc3UyQs6j0&callback=initMap"></script>
	
      <script type="text/javascript">
        
        var poly;
          var map;

          function initMap() {
            map = new google.maps.Map(document.getElementById('map'), {
              zoom:7,
              center: {lat: 21.879, lng: -87.624}  // Center the map on Chicago, USA.
            });

            var points = [
              {lat: 21.725, lng: -86.564},
              {lat: 22.879, lng: -84.884},
              {lat: 23.655, lng: -81.561},
              {lat: 24.654, lng: -75.223}
            ];

            poly = new google.maps.Polyline({
              strokeColor: '#000000',
              strokeOpacity: 1.0,
              strokeWeight: 3
            });
            poly.setMap(map);

            // Add a listener for the click event
            for (var i = 0; i < points.length; i++) {
               addLatLng(new google.maps.LatLng(points[i].lat,points[i].lng))
            }
          }

console.log("hello world");

          // Handles click events on a map, and adds a new point to the Polyline.
          function addLatLng(point) {
            var path = poly.getPath();

            // Because path is an MVCArray, we can simply append a new coordinate
            // and it will automatically appear.
            path.push(point);
            
            // Add a new marker at the new plotted point on the polyline.
            var marker = new google.maps.Marker({
              position: point,
              title: '#' + path.getLength(),
              map: map
            });
          }


      </script>

      <style type="text/css">
      	html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
      </style>

</head>
<body>




<div id="map" style="height: 100%"></div>


</body>
</html>